<template>
 <div class="permission-edit">
    <!-- <el-input
      placeholder="请输入用户名称"
      v-model="filterText">
    </el-input> -->
    <div class="page-box-row-left">
      <FormBlock
        title="所有用户"
        direction="column"
        style="width: 44%; max-width: 320px; overflow-x: hidden;"
        height="400px"
      >
        <Input class="tree-search" v-model="userName" search @on-search="serachUser" placeholder="请输入查询关键字" />
        <div class="tree-box">
          <el-tree
            class="treeStyle"
            ref="deptUserTree"
            :props="defaultProps"
            :load="loadNode"
            node-key="nodeId"
            lazy
            show-checkbox
            :filter-node-method="filterNode"
            :check-strictly="true"
            @check-change="checkChange"
          >
          </el-tree>
        </div>

      </FormBlock>
      <FormBlock
        :title="`已选择(${selectUserList.length})`"
        direction="column"
        style="width: 45%; max-width: 330px; overflow-x: hidden; float: right;"
        height="400px"
      >
      <ul>
        <li style="padding:5px 20px" v-for="item in selectUserList" :key="item.name"> {{item.name}}</li>
      </ul>
      </FormBlock>
    </div>
  </div>

</template>

<script>
import coverApi from '@/api/cover.js'
export default {
    props:{
        title:{
            type: String,
            default() {
            return "";
            }
        },
        single: {
          type:Boolean,
          default: false
        }
    },
    data() {
      return {
        actions: [
            {
                text: "取消",
                handle: () => {
                    this.$emit("Close");
                }
            },
            {
                text: "确认",
                theme: "primary",
                icon: "save",
                //handle: this.save,
                  handle: () => {
                     this.$emit("Close", this.selectUserList);
                  },
                //loading: false
            }
   
        ],
        loading: false,
        filterText: '',
        defaultProps: {
          children: 'children',
          label: 'name',
          isLeaf: 'leaf'
        },
        selectUserList: [],
        userList: [],
        userName: '',
        treeResolve: null
      }
},
   watch: {
    },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      if (({}).hasOwnProperty.call(data, 'adminlist')) {
        return !!data.adminlist && data.adminlist.split(',').find(item => item.indexOf(value) !== -1);
      } else if (data.type == 'user') {
        return data.name.indexOf(value) !== -1
      } else {
        return false
      }
    },
    serachUser() {
      this.$refs.deptUserTree.filter(this.userName);
    },
    checkChange(node, isCheck) {
      if (isCheck && !this.selectUserList.find(item => item.name == node.name) && node.type == 'user') {
        if (!this.single) {
          this.selectUserList.push({ name: node.name, org: node.nodeId })
        } else {
          this.selectUserList = [{ name: node.name, org: node.nodeId }]
        }      
      }
      if (!isCheck) {
        this.selectUserList = this.selectUserList.filter(item => item.name !== node.name)
      }
      let selectList = []
      this.userList.forEach(item => {
        if (this.selectUserList.find(user => user.name == item.name)) {
          selectList.push(item.nodeId)
        }
      })
      this.$refs.deptUserTree.setCheckedKeys(selectList)
    },
    loadNode(node, resolve) {

      this.treeResolve = resolve
      coverApi.getRptTrgnodeTree({
        parentNodeCode: node.level === 0 ? -1 : node.data.nodeId.split('id')[0],
      }).then(res => {
        let data = res.data.data
        data.forEach(info => {
          info.name = info.nodeName
          info.type = 'dept'
          info.nodeId = info.nodeId
          info.disabled = true
        });
        let list = []

        if (node.level !== 0) {
          let userList = node.data.adminlist ? node.data.adminlist.split(',').map(item => {
            return {
              name: item,
              leaf: true,
              nodeId: node.data.nodeId+'-'+item,
              type: 'user'
            }
          }): []
          userList = userList.filter(item => item.name.length > 0)
          userList.forEach(item => {
            if (!this.userList.find(user => user.nodeId == item.nodeId )) {
              this.userList.push(item)
            }
          })
          list = [...data, ...userList]
        } else {
          list = data
        }
        let selectList = []
        this.userList.forEach(item => {
          if (this.selectUserList.find(user => user.name == item.name)) {
            selectList.push(item.nodeId)
          }
        })
        this.$refs.deptUserTree.setCheckedKeys(selectList)
        resolve(list)
        this.serachUser()
      })
    }
  },
  created: function () {
      this.$emit("SetTitle", this.title);
      this.$emit("SetPageWidth", 820); 
      this.$emit("SetPageActions", this.actions);
    },

}
</script>

<style lang="less" scoped>
.data{
    padding: 24px;
    line-height: 1;
    min-height: 43px;
    font-size: 18px;
    color: #12151B;
    font-weight: 600;
}

.permission-edit {
  .page-box-row-left {
    // .el-tree > div > div > label {
    //   display: none;
    // }
    .operation-area {
      // width: 75px;
      width: 8%;
      max-width: 55px;
      padding-left: 6px;
      position: relative;
      // float: left;
      display: inline-block;
      // margin: 0 16px;
      vertical-align: middle;
      margin: 200px auto 0px auto;
      button {
        border-radius: 0;
      }
      button:first-child {
        color: #fff;
        background-color: #ff6f4b;
        border-color: #ff6f4b;
        margin-bottom: 16px;
      }

      button:not(:first-child) {
        color: #ff6f4b;
        background-color: #ffffff;
        border-color: #ff6f4b;
      }
    }
    .assignedTree {
      .ivu-input-wrapper {
        display: none;
      }
      .ivu-input-small {
        height: 22px;
        font-size: 12px;
      }
      .attribute-read-only {
        width: 100%;
        padding-left: 8px;
      }
      .el-tree-node__content:hover {
        .ivu-input-wrapper {
          display: inline-block;
        }
        .attribute-read-only {
          width: 100%;
          padding-left: 8px;
          display: none;
        }
      }
    }
  }
}
/* .search{
    /deep/.ivu-auto-complete div, .ivu-auto-complete:focus {
    margin-top: -3px;
    margin-bottom: 3px;
} 
}*/
.el-input{
    margin-bottom: 10px;
    margin-top: -10px;
}
/deep/.is-disabled {
  display: none;
}
/deep/.ivu-icon-ios-search:before, .ivu-icon-search:before {
  content: "\f2a7";
}
.tree-search {
  padding: 4px;
}
.tree-box {
  height: 350px;
  overflow-y: auto;
  overflow-x: hidden;
}
.tree-box::-webkit-scrollbar {
  width: 4px;
}
/deep/.el-checkbox__input.is-checked .el-checkbox__inner, /deep/.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #f99c34;
  border-color: #f99c34;
}
/deep/.el-checkbox__input.is-focus .el-checkbox__inner {
  border-color: #f99c34;
}
/deep/.el-checkbox__inner:hover {
  border-color: #f99c34;
}
</style>

<style lang="less">

</style>